<template>
  <div ref="chartElement"></div>
</template>

<script setup>
import TransformEcharts from 'fos-ab-echart'
import { watch,ref ,nextTick} from 'vue';
const chartElement = ref()
const props = defineProps({
  analysisChartContent:{type:Object,default:()=>{return {}}}
})
const onLoad = ()=>{
  const {xAxis,yAxis,series}  = props.analysisChartContent.chartContent
  if(!props.analysisChartContent.value) return
  new TransformEcharts({
      xAxis,
      yAxis,
      seriesOptionList: series,
      seriesData: props.analysisChartContent.value,
      dom: chartElement.value,
    })
}
watch(()=>props.analysisChartContent,()=>{
  nextTick(()=>{
    onLoad()
  })
},{deep:true,immediate:true})
</script>

<style lang='less' scoped>
.chartElement{
  width: 500px;
  height: 500px;
}
</style>